<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left">
        <span>商品列表</span>
        <el-button style="float: right; padding: 3px 0" @click="add" type="text">添加</el-button>
      </div>
      <el-table :data="products" border style="width: 100%">
          <el-table-column prop="images" label="主图" style="width: 20%">
              <template slot-scope="scope">
                  <img width=50 height=50 v-if="scope.row.images.length>0" :src="baseImage+scope.row.images.split(';')[0]">
                  <span v-else>无图</span>
              </template>
          </el-table-column>
        <el-table-column prop="name" label="名称" style="width: 20%"></el-table-column>

        <el-table-column prop="description" label="描述" style="width: 50%"></el-table-column>

        <el-table-column label="操作" style="width: 10%">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button @click="dele(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:10px;">
        <el-pagination  background
          @current-change="handleCurrentChange"
          :current-page.sync="pagenow"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { productkinds, productLDele, productSearch } from "@/libs/api.js";
export default {
  methods: {
    dele(row) {
      let ref = this;
      productLDele(row.id).then(res => {
        this.$util.success();
        var temp = -1;
        for (var i = 0; i < this.products.length; i++) {
          if (this.products[i].id == row.id) {
            temp = i;
          }
        }
        if (temp != -1) {
          this.products.splice(temp, 1);
        }
        this.total--;
      });
    },
    add() {
      this.$router.push({
        path: "/product/add"
      });
    },
    edit(row) {
       this.$router.push({
        path: "/product/add",
        query:{id:row.id}
      });
    },
 
    handleCurrentChange(p){
       this.loadPage(p);
    },
    loadPage(){
        var param ={"pagesize":10,"pagenow":this.pagenow};
        productSearch(param).then(res => {
          this.products = res.rows;
          this.total = res.total;
        });
    }
  },

  mounted() {
    this.loadPage();
    this.baseImage=this.$http.baseImage;
  },

  data() {
    return {
      products: [],
      total:0,
      pagenow:1,
      pagesize:10,
      baseImage:""
    };
  }
};
</script>